<template>
  <view class="container">
    <!-- 搜索筛选栏 -->
    <view class="search-bar">
      <uni-search-bar placeholder="搜索种鹅编号/品种" @confirm="handleSearch" />
      <uni-tag 
        v-for="tag in filterTags" 
        :key="tag.value" 
        :text="tag.label" 
        :type="selectedFilter === tag.value ? 'primary' : 'default'"
        @click="toggleFilter(tag.value)"
      />
    </view>

    <!-- 种鹅信息卡片 -->
    <view class="card-container">
      <view 
        v-for="goose in filteredGeese" 
        :key="goose.id" 
        class="goose-card"
        @click="showDetail(goose.id)"
      >
        <!-- 卡片头部 -->
        <view class="card-header">
          <text class="goose-id">{{ goose.id }}</text>
          <uni-tag 
            :text="goose.breedingStatus" 
            :type="getStatusType(goose.breedingStatus)"
            size="small"
          />
        </view>

        <!-- 基本信息 -->
        <view class="info-section">
          <view class="info-item">
            <uni-icons type="person" size="16" color="#666" />
            <text class="info-text">{{ goose.breed }} · {{ goose.age }}</text>
          </view>
          <view class="info-item">
            <uni-icons type="calendar" size="16" color="#666" />
            <text class="info-text">入栏日期{{ goose.joinDate }}</text>
          </view>
		  <view class="info-item">
		    <uni-icons type="auth" size="16" color="#666" />
		    <text class="info-text">鹅栏编号:{{ goose.houseid }}</text>
		  </view>
        </view>

        <!-- 健康指标 -->
        <view class="health-indicators">
          <view class="indicator">
            <text class="indicator-label">体重</text>
            <view class="progress-bar">
              <view 
                class="progress" 
                :style="{ width: (goose.weight / 8) + '%' }"
              />
              <text class="indicator-value">{{ goose.weight }}kg</text>
            </view>
          </view>
          
          <view class="indicator">
            <text class="indicator-label">产蛋率</text>
            <view class="progress-bar">
              <view 
                class="progress egg-progress" 
                :style="{ width: goose.layingRate + '%' }"
              />
              <text class="indicator-value">{{ goose.layingRate }}%</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="btn record-btn" @click.stop="showBreedingRecord(goose.id)">
            <uni-icons type="plus" size="14" /> 记录
          </button>
          <button class="btn vaccine-btn" @click.stop="markVaccine(goose.id)">
            <uni-icons type="flag" size="14" /> 疫苗
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, computed } from 'vue';

// 模拟数据
const geeseData = reactive([
  {
    id: 'SG2025-001',
    breed: '四川白鹅',
    age: '公',
    weight: 6.2,
    layingRate: 85,
    joinDate: '2022-03-15',
    breedingStatus: '繁殖期',
    lastVaccine: '2023-08-01',
    eggCount: 120,
    healthStatus: '健康',
	houseid:'10001'
  },
  {
    id: 'SG2025-002',
    breed: '北京烤鹅',
    age: '母',
    weight: 6.2,
    layingRate: 85,
    joinDate: '2022-03-15',
    breedingStatus: '休假期',
    lastVaccine: '2023-08-01',
    eggCount: 120,
    healthStatus: '健康',
	houseid:'10002'
  },
  {
    id: 'SG2025-003',
    breed: '大白肉鹅',
     age: '公',
    weight: 5.2,
    layingRate: 85,
    joinDate: '2022-03-15',
    breedingStatus: '繁殖期',
    lastVaccine: '2023-08-01',
    eggCount: 120,
    healthStatus: '健康',
  	houseid:'10003'
  }
  // {
  //   id: 'SG2025-004',
  //   breed: '白天鹅',
  //    age: '母',
  //   weight: 8.2,
  //   layingRate: 85,
  //   joinDate: '2022-03-15',
  //   breedingStatus: '繁殖期',
  //   lastVaccine: '2023-08-01',
  //   eggCount: 120,
  //   healthStatus: '健康',
  // 	houseid:'10004'
  // }
]);

// 筛选逻辑
const filterState = reactive({
  searchText: '',
  selectedFilter: 'all'
});

const filterTags = [
  { label: '全部', value: 'all' },
  { label: '繁殖期', value: 'breeding' },
  { label: '休产期', value: 'resting' },
  { label: '需关注', value: 'attention' }
];

const filteredGeese = computed(() => {
  return geeseData.filter(goose => {
    const matchesSearch = goose.id.includes(filterState.searchText) || 
                        goose.breed.includes(filterState.searchText);
    const matchesFilter = filterState.selectedFilter === 'all' ||
                        goose.breedingStatus === filterState.selectedFilter;
    return matchesSearch && matchesFilter;
  });
});

// 状态类型映射
const getStatusType = (status) => {
  const statusMap = {
    '繁殖期': 'success',
    '休产期': 'warning',
    '需关注': 'error'
  };
  return statusMap[status] || 'default';
};

// 交互方法
const handleSearch = (e) => {
  filterState.searchText = e.value;
};

const toggleFilter = (filter) => {
  filterState.selectedFilter = filter;
};

const showDetail = (id) => {
  uni.navigateTo({ url: `/pages/goose/detail?id=${id}` });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f6f7;
}

.search-bar {
  margin-bottom: 20rpx;
  background: white;
  padding: 15rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340rpx, 1fr));
  gap: 20rpx;
}

.goose-card {
  background: white;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
    
    .goose-id {
      font-weight: bold;
      color: #333;
      font-size: 30rpx;
    }
  }
}

.info-section {
  margin-bottom: 15rpx;
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
    
    .info-text {
      margin-left: 8rpx;
      color: #666;
      font-size: 26rpx;
    }
  }
}

.health-indicators {
  .indicator {
    margin-bottom: 15rpx;
    
    .indicator-label {
      display: block;
      color: #888;
      font-size: 24rpx;
      margin-bottom: 5rpx;
    }
    
    .progress-bar {
      height: 24rpx;
      background: #eee;
      border-radius: 12rpx;
      position: relative;
      
      .progress {
        height: 100%;
        border-radius: 12rpx;
        background: #4cd964;
        transition: width 0.3s;
        
        &.egg-progress {
          background: #ff9500;
        }
      }
      
      .indicator-value {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 20rpx;
        font-weight: bold;
      }
    }
  }
}

.action-buttons {
  display: flex;
  gap: 10rpx;
  margin-top: 15rpx;
  
  .btn {
    flex: 1;
    padding: 8rpx 0;
    font-size: 24rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.record-btn {
      background: #4cd96422;
      color: #4cd964;
    }
    
    &.vaccine-btn {
      background: #007aff22;
      color: #007aff;
    }
  }
}
</style>